<template>
  <div class="mainControl">
    <div class="mainControlTop">
      <!-- 左边 -->
      <div class="leftBox">
        <div class="top">
          <div
            :class="['circle', isShowHandlerDefault ? 'Showdisabled' : '']"
            @click="handlderCircle(1)"
          >
            <span
              :class="[ic_hornActive ? 'ic_horn_active' : 'ic_horn', 'ic_EQ']"
            ></span>
          </div>
          <div :class="[ic_hornActive ? 'fontActive' : 'font']">
            <span>前左喇叭</span>
          </div>
        </div>
        <div class="topTow">
          <div
            :class="['circle', isShowHandlerDefault ? 'Showdisabled' : '']"
            @click="handlderCircle(3)"
          >
            <span
              :class="[
                ic_hornActiveTow ? 'ic_horn_active' : 'ic_horn',
                'ic_EQ',
              ]"
            ></span>
          </div>
          <div :class="[ic_hornActiveTow ? 'fontActive' : 'font']">
            <span>后左喇叭</span>
          </div>
        </div>
      </div>
      <!-- 中间 -->
      <div class="middleBox">
        <span :class="['ic_vehicle']"></span>
      </div>
      <!-- 右边 -->
      <div class="rigthBox">
        <div class="top">
          <div
            :class="['circle', isShowHandlerDefault ? 'Showdisabled' : '']"
            @click="handlderCircle(2)"
          >
            <span
              :class="[
                ic_beforeActive ? 'ic_before_active' : 'ic_before',
                'ic_EQ',
              ]"
            ></span>
          </div>
          <div :class="[ic_beforeActive ? 'fontActive' : 'font']">
            <span>前右喇叭</span>
          </div>
        </div>
        <div class="topTow">
          <div
            :class="['circle', isShowHandlerDefault ? 'Showdisabled' : '']"
            @click="handlderCircle(4)"
          >
            <span
              :class="[
                ic_beforeActiveTow ? 'ic_before_active' : 'ic_before',
                'ic_EQ',
              ]"
            ></span>
          </div>
          <div :class="[ic_beforeActiveTow ? 'fontActive' : 'font']">
            <span>后右喇叭</span>
          </div>
        </div>
      </div>
    </div>
    <div class="mainControlBottom">
      <van-checkbox
        class="chekoutBut"
        v-model="isShowHandlerDefault"
        shape="square"
        @click="handlerDefault"
        >整体设置</van-checkbox
      >
      <!-- <button
      class="mainControlBut"
      v-if="isShowHandlerDefault"
      @click="handlerDefault"
    >
      独立设置
    </button>
    <button class="mainControlBut" v-else @click="handlerGlobal">
      整体设置
    </button> -->
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapGetters, mapActions } from "vuex";
export default {
  data() {
    return {
      // ic_hornActive: false,
      // ic_hornActiveTow: false,
      // ic_beforeActive: false,
      // ic_beforeActiveTow: false,
      topTow: false,
      isShowHandlerDefault: false,
    };
  },
  created() {
    this.setIc_hornActive(false);
    this.setIc_beforeActive(false);
    this.setIc_hornActiveTow(false);
    this.setIc_beforeActiveTow(false);
    // console.log("9999999", this.loudspeaker);
    switch (this.loudspeaker) {
      case "00":
        this.setIc_hornActive(true);
        let str =
          `F05505000D0900${this.SpeakerNumber}${this.SpeakerVolume.toString(
            16
          ).padStart(2, 0)}` +
          this.$getCheckSum(
            `F05505000D0900${this.SpeakerNumber}${this.SpeakerVolume.toString(
              16
            ).padStart(2, 0)}`
          );

        window.bleManage.send(str);
        break;
      // case "01":
      //   this.setIc_beforeActive(true);
      //   let str1 =
      //     "F05505000D09010064" + this.$getCheckSum("F05505000D09010064");
      //   console.log("create喇叭设置2---" + str1);
      //   window.bleManage.send(str1);
      //   break;
      // case "02":
      //   this.setIc_hornActiveTow(true);
      //   let str2 =
      //     "F05505000D09020064" + this.$getCheckSum("F05505000D09020064");
      //   console.log("create喇叭设置3---" + str2);
      //   window.bleManage.send(str2);
      //   break;
      // case "03":
      //   this.setIc_beforeActiveTow(true);
      //   let str3 =
      //     "F05505000D09040064" + this.$getCheckSum("F05505000D09040064");
      //   console.log("喇叭设置4---" + str3);
      //   window.bleManage.send(str3);
      //   break;
    }
  },
  computed: {
    ...mapState({
      ic_hornActive: (state) => state.ble.ic_hornActive,
      ic_beforeActive: (state) => state.ble.ic_beforeActive,
      ic_hornActiveTow: (state) => state.ble.ic_hornActiveTow,
      ic_beforeActiveTow: (state) => state.ble.ic_beforeActiveTow,
      loudspeaker: (state) => state.ble.loudspeaker,
      SpeakerVolume: (state) => state.ble.SpeakerVolume,
      SpeakerNumber: (state) => state.ble.SpeakerNumber,
    }),
  },
  methods: {
    ...mapMutations("ble", [
      "setIc_hornActive",
      "setIc_beforeActive",
      "setIc_hornActiveTow",
      "setIc_beforeActiveTow",
    ]),
    handlderCircle(id) {
      // this.ic_hornActive =
      //   this.ic_hornActiveTow =
      //   this.ic_beforeActive =
      //   this.ic_beforeActiveTow =
      //     false;
      this.setIc_hornActive(false);
      this.setIc_beforeActive(false);
      this.setIc_hornActiveTow(false);
      this.setIc_beforeActiveTow(false);
      // this.setData(
      //   { ic_hornActive: false },
      //   { ic_hornActiveTow: false },
      //   { ic_beforeActive: false },
      //   { ic_beforeActiveTow: false }
      // );
      console.log(id);
      switch (id) {
        case 1:
          // this.ic_hornActive = true;
          // this.setData({ ic_hornActive: true });
          this.setIc_hornActive(true);
          let str =
            "F05505000D09000064" + this.$getCheckSum("F05505000D09000064");
          console.log("喇叭设置1---" + str);
          window.bleManage.send(str);
          break;
        case 2:
          // this.ic_beforeActive = true;
          // this.setData({ ic_beforeActive: true });
          this.setIc_beforeActive(true);
          let str1 =
            "F05505000D09010064" + this.$getCheckSum("F05505000D09010064");
          console.log("喇叭设置2---" + str1);
          window.bleManage.send(str1);
          break;
        case 3:
          // this.ic_hornActiveTow = true;
          // this.setData({ ic_hornActiveTow: true });
          this.setIc_hornActiveTow(true);
          let str2 =
            "F05505000D09020064" + this.$getCheckSum("F05505000D09020064");
          console.log("喇叭设置3---" + str2);
          window.bleManage.send(str2);
          break;
        case 4:
          // this.ic_beforeActiveTow = true;
          // this.setData({ ic_beforeActiveTow: true });
          this.setIc_beforeActiveTow(true);
          let str3 =
            "F05505000D09040064" + this.$getCheckSum("F05505000D09040064");
          console.log("喇叭设置4---" + str3);
          window.bleManage.send(str3);
      }
      // if (id == 1) {
      //   this.circleActive = true;
      //   this.topTow = false;
      // } else if (id == 2) {
      //   this.topTow = true;
      //   this.circleActive = false;
      // }
    },
    //独立设置
    handlerDefault() {
      // this.isShowHandlerDefault = false;
      // this.ic_hornActive =
      //   this.ic_hornActiveTow =
      //   this.ic_beforeActive =
      //   this.ic_beforeActiveTow =
      //     true;
      console.log("=============", this.isShowHandlerDefault);
      if (this.isShowHandlerDefault) {
        this.setIc_hornActive(true);
        this.setIc_beforeActive(true);
        this.setIc_hornActiveTow(true);
        this.setIc_beforeActiveTow(true);
        this.handlerAll();
      } else {
        this.setIc_hornActive(false);
        this.setIc_beforeActive(false);
        this.setIc_hornActiveTow(false);
        this.setIc_beforeActiveTow(false);
        // switch (this.loudspeaker) {
        //   case "00":
        //     this.setIc_hornActive(true);
        //     break;
        //   case "01":
        //     this.setIc_beforeActive(true);
        //     break;
        //   case "02":
        //     this.setIc_hornActiveTow(true);
        //     break;
        //   case "03":
        //     this.setIc_beforeActiveTow(true);
        //     break;
        // }
      }
    },
    //整体设置
    // handlerGlobal() {
    //   this.isShowHandlerDefault = true;
    //   // this.ic_hornActive =
    //   //   this.ic_hornActiveTow =
    //   //   this.ic_beforeActive =
    //   //   this.ic_beforeActiveTow =
    //   //     false;
    //   // this.setIc_hornActive(false);
    //   // this.setIc_beforeActive(false);
    //   // this.setIc_hornActiveTow(false);
    //   // this.setIc_beforeActiveTow(false);
    // },
    // 整体设置全部下发
    handlerAll() {
      let str = "F05505000D09000064" + this.$getCheckSum("F05505000D09000064");
      console.log("喇叭设置1---" + str);
      window.bleManage.send(str);
      let str1 = "F05505000D09010064" + this.$getCheckSum("F05505000D09010064");
      console.log("喇叭设置2---" + str1);
      window.bleManage.send(str1);
      let str2 = "F05505000D09020064" + this.$getCheckSum("F05505000D09020064");
      console.log("喇叭设置3---" + str2);
      window.bleManage.send(str2);
      let str3 = "F05505000D09040064" + this.$getCheckSum("F05505000D09040064");
      console.log("喇叭设置4---" + str3);
      window.bleManage.send(str3);
    },
  },
};
</script>

<style lang="less" scoped>
.mainControl {
  display: flex;
  flex-direction: column;
  // justify-content: center;
  align-items: center;
  .mainControlTop {
    display: flex;
    justify-content: space-between;
    width: 264px;
    height: 260px;
    // margin: auto;
    .Showdisabled {
      pointer-events: none;
    }
  }

  .mainControlBut {
    width: 180px;
    height: 40px;
    background: var(--bg_colora59f7);
    border-radius: 20px;
    color: var(--color_blue);
    border: none;
    opacity: 0.9;
    margin-top: 23px;
    font-size: 16px;
  }
  .chekoutBut {
    font-size: 16px;
  }
  .leftBox {
    height: 100%;
    flex-direction: column;
    justify-content: space-around;
    overflow: hidden;
    .top {
      width: 48px;
      height: 60px;
      margin-top: 40px;
    }
    .topTow {
      width: 48px;
      height: 60px;
      margin-top: 60px;
    }
  }
  .rigthBox {
    height: 100%;
    flex-direction: column;
    justify-content: space-around;
    overflow: hidden;
    .top {
      width: 48px;
      height: 60px;
      margin-top: 40px;
    }
    .topTow {
      width: 48px;
      height: 60px;
      margin-top: 60px;
    }
  }

  .fontActive {
    font-size: 12px;
    margin-top: 4px;
    color: var(--color_blue);
  }
  .font {
    font-size: 12px;
    margin-top: 4px;
    color: var(--font_gray);
  }
  // .circleActive {
  //   width: 40px;
  //   height: 40px;
  //   background: var(--color_blue);
  //   border-radius: 50%;
  //   text-align: center;
  //   line-height: 50px;
  // }
  .circle {
    width: 40px;
    height: 40px;
    // background: var(--btn_bg);
    // border-radius: 50%;
    // text-align: center;
    // line-height: 50px;
  }
  .mainControlBottom {
    width: 264px;
    // height: 260px;
  }
}
</style>